<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col span="7">
        <el-input :placeholder="$t('table.placeholder')" clearable v-model="queryForm.query">
        </el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="userList">{{ $t('table.search') }}</el-button>
      <el-button type="primary" @click="handleDialog()">{{ $t('table.adduser') }}</el-button>
    </el-row>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column :prop="item.prop" :label="$t(`table.${item.label}`)" v-for="(item, index) in options"
        :key="index">
        <template v-slot="{ row }" v-if="item.prop === 'mg_state'">
          <el-switch v-model="row.mg_state" />
        </template>
        <template #default="{row}" v-if="item.prop === 'action'">
          <el-button type="primary" size="small" :icon="Edit" @click="handleDialog(row)"></el-button>
          <!-- <el-button type="warning" size="small" :icon="Setting"></el-button> -->
          <el-button type="danger" size="small" :icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination 
      v-model:current-page="queryForm.pagenum" 
      :page-size="queryForm.pagesize" 
      :page-sizes="[2, 5, 10, 15]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" />
  </el-card>
  <Dialog v-model="dialogFormVisible"
  :dialogTitle="dialogTitle" 
  @initUserList='userList'
  v-if="dialogFormVisible"/>
</template>

<script setup>
import { Search, Edit, Setting, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { getUser } from '@/api'
import { options } from './options'
import Dialog from './components/dialog.vue'
const queryForm = ref({
  query: '',
  pagenum: 1,
  pagesize: 2
})
const total = ref(0)
const tableData = ref([])
const dialogTitle = ref('')
const dialogFormVisible = ref(false)
const userList = async () => {
  let res = await getUser(queryForm.value)
  // console.log(queryForm.value);
  tableData.value = res[0].data
  total.value = res[0].total
}
userList()
const handleSizeChange = (pageSize) => {
  queryForm.value.pagenum = 1
  queryForm.value.pagesize = pageSize
  userList()
}
const handleCurrentChange = (pageNum) => {
  queryForm.value.pagenum = pageNum
  userList()

}
const handleDialog = () => {
  dialogTitle.value = '添加用户'
  dialogFormVisible.value = true
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
</style>
